<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
  <!--引入BootStrap的核心文件-->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!--引入Jquery的核心js文件，需要在bootstrap的js之前引入-->
  <script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
  <!--引入BootStrap的js文件-->
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!--
      下拉菜单
          1、使用一个类名为dropdown或btn-group的div包裹整个下拉框:<div class="dropdown"></ div>
          2、默认向下dropdown，向上弹起加入 . dropup即可
          3、使用button作为父菜单，使用类名: dropdown-toggle和自定义data-toggle属性
          <button type= "button" class="btn btn-default dropdown-toggle" data-toggle=" dropdown"></button>
          4、在button中使用font制作下拉箭头
              <span class="caret"></span>
          5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
          6、分组分割线:<li>添加类名“divider”来实现添加下拉分隔线的功能
          7、分组标题:li 添加类名“dropdown-header”来实现分组的功能
          8、对齐方式:
              1)、dropdown-menu-left 左对齐 默认样式
              2)、dropdown-menu-right 右对齐
          9、激活状态(.active)和禁用状态(.disabled)
    -->
<!--使用一个类名为dropdown 或 btn-group的div包裹整个下拉框;
    默认向下dropdown，向上弹起加入. dropup 即可-->
<div class="dropdown">

  <!--使用button作为父菜单，使用类名: dropdown-toggle和自定义data-toggle属性-->
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    喜欢的频道
    <!--设置下拉箭头-->
    <span class="caret"></span>
  </button>

  <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
  <ul class="dropdown-menu">
    <!--分组标题:li 添加类名“dropdown-header”来实现分组的功能-->
    <li class="dropdown-header">--科普--</li>
    <li><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">人与自然</a></li>

    <!--分组分割线:<li>添加类名“divider”来实现添加下拉分隔线的功能-->
    <li class="divider"></li>

    <li class="dropdown-header">--搞笑--</li>
    <li class="active"><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">欢乐喜剧人</a></li>
    <li class="disabled"><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">快乐大本营</a></li>
    <li><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">生活大爆炸</a></li>
  </ul>

</div>
</body>
</html>